<template>
    <!--@contextmenu.prevent=""-->
    <div class="bar">
        <div class="operateBtn leftBtn" :class="{disabled: isNaN(process) || process == 0}" @click="scrollBy_">
            <Icon type="ios-arrow-back" size="20"></Icon>
        </div>
        <div class="tabs">
            <vue-scroll ref="scroll" :ops="scrollOps" @handle-scroll-complete="onScrollComplete"
                        @handle-resize="onContentResize" style="height: 36px">
                <div class="tab" :class="{active:currentNavTab == item.name}"
                     @contextmenu.prevent="onContextMenu"
                     v-for="item in openedNavTabs" @click="itemClick"
                     :data-nav-tab-name="item.name" :data-category="item.category">
                    <Icon v-if="item.name == 'home'" class="homeIcon" type="md-home"></Icon>
                    {{item.title}}
                    <Icon v-if="item.name != 'home'" @click.stop="remove" :data-nav-tab-name="item.name" class="remove"
                          type="md-close-circle"></Icon>
                </div>
            </vue-scroll>
        </div>
        <div class="operateBtn closeList" @click="closeAll">
            <Icon type="md-trash"></Icon>
            关闭全部
        </div>
        <div class="operateBtn rightBtn" :class="{disabled: isNaN(process) || process == 1}" @click="scrollBy">
            <Icon type="ios-arrow-forward" size="20"></Icon>
        </div>
    </div>
</template>

<script>
    export default {
        name: "NavTab",
        data() {
            return {
                process: NaN,
                scrollOps: {
                    vuescroll: {
                        // mode: 'slide'
                    },
                    scrollPanel: {
                        scrollingY: false,
                        scrollingX: true
                    },
                    rail: {
                        pos: "right",
                        keepShow: false,
                        opacity: 0 //'0.5'
                    },
                    bar: {
                        keepShow: false,
                        opacity: 0,
                        hover: false
                    }
                }
            }
        },
        computed: {
            openedNavTabs() {
                return this.$store.state.openedNavTabs;
            },
            currentNavTab() {
                return this.$store.state.currentNavTab;
            }
        },
        methods: {
            scrollBy() {
                this.$refs['scroll'].scrollBy({
                    dx: 120
                })
            },
            scrollBy_() {
                this.$refs['scroll'].scrollBy({
                    dx: -120
                })
            },
            remove(event) {
                this.$store.commit("REMOVE_NAV_TAB", event.currentTarget.dataset.navTabName);
                this.$emit("navTabChanged");
            },
            closeAll(event) {
                this.$store.commit("REMOVE_ALL_NAV_TAB");
                this.$emit("navTabChanged");
            },
            itemClick(event) {
                let name = event.currentTarget.dataset.navTabName;
                if (name == this.$store.state.currentNavTab) {
                    return false;
                }
                // this.$store.commit("SET_CURRENT_NAV_TAB", name);
                // this.$store.commit("SET_CATEGORY", event.currentTarget.dataset.category);
                // this.$store.commit("OPEN_NAV_TAB", name);
                this.$router.push({
                    name: name
                });
                this.$emit("navTabChanged");
            },
            onScrollComplete(vertical, horizontal) {
                this.process = horizontal.process;
            },
            onContentResize(vertical, horizontal) {
                this.process = horizontal.process;
            },
            onContextMenu(event) {
                var model = [
                    {icon: 'md-sync', name: '刷新当前页'},
                    {icon: 'md-close', name: '关闭当前页', divided: true},
                    {icon: 'ios-close-circle-outline', name: '关闭其它页'},
                    {icon: 'md-trash', name: '关闭全部'}
                ];
                var tab = event.currentTarget.dataset.navTabName;

                if (tab == 'home') {
                    model[1].disabled = true;
                }
                var opendTabCount = this.$store.state.openedNavTabs.length;
                if (opendTabCount == 1 || (opendTabCount == 2 && tab != 'home')) {
                    model[2].disabled = true;
                    model[3].disabled = true;
                }
                if (this.$store.state.currentNavTab != tab) {
                    model[0].disabled = true;
                    model[2].disabled = true;
                    model[3].disabled = true;
                }
                this.n9.openContextMenu(event.clientX, event.clientY, model, (model, index) => {
                    switch (index) {
                        case 0:
                            this.$store.commit('REFRESH_NAV_TAB');
                            break;
                        case 1:
                            this.$store.commit("REMOVE_NAV_TAB", tab);
                            this.$emit("navTabChanged");
                            break;
                        case 2:
                            this.$store.commit("REMOVE_OTHER_NAV_TAB", tab);
                            this.$emit("navTabChanged");
                            break;
                        case 3:
                            this.$store.commit("REMOVE_ALL_NAV_TAB");
                            this.$emit("navTabChanged");
                            break;
                    }
                });
            }
        }
    }
</script>

<style scoped>
    .bar {
        height: 100%;
        /*padding: 0 10px;*/
        position: relative;
        line-height: 0;
        background: #f5f5f5;
    }

    .tabs {
        float: left;
        height: 36px;
        position: absolute;
        left: 20px;
        right: 100px;
        top: 0px;
        white-space: nowrap;
        clear: both;
        font-size: 0;
    }

    .tab {
        color: #a7b1c2;
        display: inline-block;
        border-right: solid 1px #e9e9e9;
        padding: 0 18px 0 15px;
        cursor: pointer;
        height: 36px;
        line-height: 38px;
        font-size: 14px;
        position: relative;
    }

    .tab.active {
        background: #2f4050;
    }

    .tab:hover {
        background: #eee;
        color: #7f8f99;
    }

    .tab.active:hover {
        background: #2f4050;
        color: #eee;
    }

    .homeIcon {
        margin-right: 5px;
    }

    .tab .remove, .tab.active .remove {
        color: #ddd;
        position: absolute;
        right: 0;
        top: 2px;
        font-size: 12px;
        width: 12px;
        height: 12px;
        text-align: center;
        line-height: 12px;
        transform: scale(0.84);
    }

    .tab.active .remove {
        color: #556878;
    }

    .tab .remove:hover {
        color: #e30300;
    }

    .tab.active .remove:hover {
        color: #a7e3ff;
    }

    .operateBtn {
        height: 36px;
        width: 20px;
        line-height: 38px;
        font-size: 14px;
        background: #65bd77;
        text-align: center;
        color: #fff;
        cursor: pointer;
    }

    .operateBtn:hover {
        background: #28bd32;
        color: #c1ffc3;
    }

    .leftBtn {
        float: left;
    }

    .rightBtn {
        float: right;
    }

    .operateBtn.disabled, .operateBtn.disabled:hover {
        background: rgba(101, 189, 119, 0.55);
        cursor: default;
        color: #eee;
    }

    .closeList {
        width: 80px;
        float: right;
        border-left: 1px #67ce68 solid;
    }
</style>